<html>
	<head>
		<title>Penpot Desktop</title>
		<link
			rel="stylesheet"
			href="../../node_modules/@shoelace-style/shoelace/cdn/themes/light.css"
		/>
		<link
			rel="stylesheet"
			href="../../node_modules/@shoelace-style/shoelace/cdn/themes/dark.css"
		/>
		<link rel="stylesheet" href="./styles/index.css" />
		<script src="./scripts/main.js" type="module"></script>
	</head>
	<body>
		<drag></drag>
		<sl-include
			id="include-controls"
			src="./components/controls.html"
		></sl-include>
		<sl-include src="./components/splash.html"></sl-include>
		<sl-include id="include-tabs" src="./components/tabs.html"></sl-include>
		<sl-include
			id="include-settings"
			src="./components/settings.html"
		></sl-include>
		<sl-include id="include-alert" src="./components/alert.html"></sl-include>

		<div id="context-menu" class="context-menu">
			<sl-menu class="menu"></sl-menu>
		</div>

		<div class="no-tabs-exist">
			<picture>
				<source
					media="(prefers-color-scheme: dark)"
					srcset="./assets/penpot-logo/logo-white.png"
				/>
				<img src="./assets/penpot-logo/logo-black.png" />
			</picture>
			<h2>No tabs are opened</h2>
			<p>Add a new tab to start making awesome things.</p>
			<sl-button variant="primary" id="open-tab">Create a tab</sl-button>
		</div>

		<sl-dialog id="diagnostics" label="Diagnostics">
			<dialog-content class="info-section"></dialog-content>
		</sl-dialog>
	</body>
</html>
